<template>
  <div id="body" class="container">
    <!-- 头部 -->
    <div class="header">
      <!-- 请选择房间 -->
      <div>
        <!-- 选择器 -->
        <el-select
          v-model="data.roomList.defaultActive"
          placeholder="请选择房间"
          style="width: 240px"
          @change="roomListSelect"
          :loading="data.loading.loadingRoomList"
        >
          <el-option
            v-for="item in data.roomList.data"
            :key="item.value"
            :label="item.room_name"
            :value="item.room_id"
          />
        </el-select>
      </div>
      <!-- 请选择直播场次 -->
      <div>
        <!-- 选择器 -->
        <el-select
          v-model="data.recordList.defaultActive"
          placeholder="请选择直播场次"
          style="width: 240px"
          @change="recordListSelect"
          :loading="data.loading.loadingRecordList"
        >
          <el-option
            v-for="item in data.recordList.data"
            :key="item.value"
            :label="item.record_name"
            :value="item.record_id"
          />
        </el-select>
      </div>
    </div>
    <!-- 页面内容 -->
    <div class="content">
      <!-- 词云图 -->
      <div class="model world_cloud_top">
        <!-- 标题 -->
        <div class="model_head world_cloud_top_head">
          <div class="world_cloud_head_left">弹幕词云</div>
        </div>
        <div id="world_cloud" v-loading="data.loading.loadingWorldCloud" class="model_content world_cloud_box" v-show="data.worldCloudCharts"></div>
      </div>
      <!-- 详细数据 -->
      <div class="model detail_box">
        <div class="model_head detail_box_head">
          详细数据
        </div>
        <!-- 数据内容 -->
        <div v-loading="data.loading.loadingDetailContent" id="detail_content" class="model_content detail_content">
          <el-table :data="data.detail.data" :row-class-name="tableRowClassName" stripe style="width: 100%">
            <el-table-column prop="content" label=" 内容" />
            <el-table-column prop="name" label="发送人" />
          </el-table>
          <el-pagination
            background
            v-model:current-page="data.getDetailOption.page"
            :page-size="data.getDetailOption.page_size"
            :page-sizes="[10, 20, 30, 40, 50]"
            layout="total, sizes, prev, pager, next, jumper"
            :total="data.detail.total"
            @size-change="onPageSizeChange"
            @current-change="onPageChange"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, reactive } from 'vue'
import http from '@/http/http'
import * as echarts from 'echarts'
import 'echarts-wordcloud'
const data = reactive({
  worldCloudCharts: true,
  roomList: {
    defaultActive: '-',
    data: [
      {
        room_name: '-',
        room_id: '-'
      }
    ]
  },
  recordList: {
    defaultActive: '-',
    data: [
      {
        record_name: '-',
        record_id: '-'
      }
    ]
  },
  getDetailOption: {
    page: 1,
    page_size: 10
  },
  detail: {},
  loading: {
    loadingRoomList: true,
    loadingDetailContent: true,
    loadingRecordList: true,
    loadingWorldCloud: true
  },
  increase_icon_src: 'https://www.helloimg.com/images/2022/04/02/RJWxYR.png',
  decline_icon_src: 'https://www.helloimg.com/images/2022/04/02/RJWJXz.png'
})

onMounted(() => {
  setRoomList()
})
/**
 * 获取并渲染 房间 数据
 */
const setRoomList = () => {
  data.loading.loadingRoomList = true
  http
    .request({
      url: '/Index/getRoomList',
      method: 'POST'
    })
    .then((res) => {
      if (res.status === 200) {
        data.roomList.defaultActive = res.data[0].room_id
        data.roomList.data = res.data
        data.loading.loadingRoomList = false
        setRecordList()
      }
    })
}
/**
 * 获取并渲染 直播记录 数据
 */
const setRecordList = () => {
  data.recordList = []
  data.loading.loadingRecordList = true
  http
    .request({
      url: '/Index/getRecordList',
      data: {
        room_id: data.roomList.defaultActive
      },
      method: 'POST'
    })
    .then((res) => {
      if (res.status === 200) {
        data.recordList.defaultActive = res.data[0].record_id
        data.recordList.data = res.data
        data.loading.loadingRecordList = false
        setDetailData()
        setWordCloud(data.recordList.defaultActive)
      }
    })
}
/**
 * 设置词云图数据
 */
const setWordCloud = (recordId) => {
  data.loading.loadingWorldCloud = true
  http
    .request({
      url: '/Index/getWordCloud',
      data: {
        record_id: recordId
      },
      method: 'POST'
    })
    .then((res) => {
      if (res.status === 200) {
        console.log(res.data)
        const chart = echarts.init(document.getElementById('world_cloud')) // 初始化
        /**
         * 当页面大小发生改变时重绘
         */
        window.onresize = function () {
          chart.resize()
        }
        const option = {
          tooltip: {
            show: true
          },
          series: [{
            type: 'wordCloud',

            // The shape of the "cloud" to draw. Can be any polar equation represented as a
            // callback function, or a keyword present. Available presents are circle (default),
            // cardioid (apple or heart shape curve, the most known polar equation), diamond (
            // alias of square), triangle-forward, triangle, (alias of triangle-upright, pentagon, and star.

            shape: 'circle',

            // Keep aspect ratio of maskImage or 1:1 for shapes
            // This option is supported from echarts-wordcloud@2.1.0
            keepAspect: false,

            // A silhouette image which the white area will be excluded from drawing texts.
            // The shape option will continue to apply as the shape of the cloud to grow.

            // maskImage: maskImage,

            // Folllowing left/top/width/height/right/bottom are used for positioning the word cloud
            // Default to be put in the center and has 75% x 80% size.

            width: '100%',
            height: '100%',

            // Text size range which the value in data will be mapped to.
            // Default to have minimum 12px and maximum 60px size.

            sizeRange: [12, 60],

            // Text rotation range and step in degree. Text will be rotated randomly in range [-90, 90] by rotationStep 45

            rotationRange: [-90, 90],
            rotationStep: 45,

            // size of the grid in pixels for marking the availability of the canvas
            // the larger the grid size, the bigger the gap between words.

            gridSize: 8,

            // set to true to allow word being draw partly outside of the canvas.
            // Allow word bigger than the size of the canvas to be drawn
            drawOutOfBound: false,

            // If perform layout animation.
            // NOTE disable it will lead to UI blocking when there is lots of words.
            layoutAnimation: true,

            // Global text style
            textStyle: {
              fontFamily: 'sans-serif',
              fontWeight: 'bold',
              // Color can be a callback function or a color string
              color: function () {
                // Random color
                return 'rgb(' + [
                  Math.round(Math.random() * 160),
                  Math.round(Math.random() * 160),
                  Math.round(Math.random() * 160)
                ].join(',') + ')'
              }
            },
            emphasis: {
              focus: 'self',

              textStyle: {
                textShadowBlur: 10,
                textShadowColor: '#333'
              }
            },

            // Data is an array. Each array item must have name and value property.
            data: res.data
          }]
        }
        chart.setOption(option)
        data.loading.loadingWorldCloud = false
      }
    })
}
/**
 * 获取并渲染 详细数据
 */
const setDetailData = () => {
  data.loading.loadingDetailContent = true
  http
    .request({
      url: '/Index/getBarrageList',
      data: {
        page: data.getDetailOption.page,
        page_size: data.getDetailOption.page_size,
        record_id: data.recordList.defaultActive
      },
      method: 'POST'
    })
    .then((res) => {
      if (res.status === 200) {
        data.detail = res.data
        data.loading.loadingDetailContent = false
      }
    })
}
const tableRowClassName = (e) => {
  if (e.row.leave_probability < 0) {
    return 'warning-row'
  }
}
const onPageChange = (e) => {
  data.getDetailOption.page = e
  setDetailData(data.getDetailOption)
}
const onPageSizeChange = (e) => {
  data.getDetailOption.page_size = e
  setDetailData(data.getDetailOption)
}
/**
 * 切换房间
 */
const roomListSelect = (e) => {
  data.getDetailOption = {
    page: 1,
    page_size: 10
  }
  data.loading.loadingDetailContent = true
  data.loading.loadingWorldCloud = true
  setRecordList()
}
/**
 * 切换记录
 */
const recordListSelect = (e) => {
  data.getDetailOption.page = 1
  data.getDetailOption.page_size = 10
  data.loading.loadingDetailContent = true
  data.loading.loadingWorldCloud = true
  setWordCloud(data.recordList.defaultActive)
  setDetailData()
}
</script>

<style lang="scss" scoped>
$shadow: 0 2px 10px 0 rgb(0, 0, 0, 0.1); // 阴影
.world_cloud_box {
  width: 100%;
  height: 400px;
}
.el-table .warning-row {
  --el-table-tr-bg-color: var(--el-color-warning-light-9);
}
</style>
